<template>
	<div class="test">
		<li v-for="item in persons">{{item}}</li>
	</div>

</template>

<script>
	export default {
		props: {

		},
		data() {
			return {
				persons:[1,2,3,4,5],
				isLoading : false
			}
		},
		mounted() {
			this.scroll();
		},
		computed: {　　
			
		},
		watch: {

		},
		methods: {
			scroll() {
				window.onscroll = this.test;
			},
			test(person,isLoading){
				let self  = this;
				let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 200
					if(bottomOfWindow && self.isLoading == false) {
						self.isLoading = true
						console.log('到底了')
						setTimeout(()=>{
							self.persons.push(self.persons.length+1);
							self.isLoading = false
							console.log(this)
						},1000)
					}
			}
		},
		beforeRouteLeave(to, from, next) {
			window.removeEventListener('scroll',this.test,false);
		}
	}
</script>
<style lang="less">
	.test {
		input {
			border: 1px solid black;
			padding-left: 10px;
		}
		li {
			height: 200px;
			border-bottom: 1px solid black;
		}
	}
</style>